<template>
  <div>
    <el-card class="box-card" style="height:800px;">
      <div id="title">
        <span class="block"></span>
        <span class="title-text">基本信息</span>
      </div>
      <div id="personInfo">
        <el-row>
          <el-col :span="7" style="background: rgb(109, 109, 109);">
            <div id="personCard">
              <div id="head-portrait">
                <img src="../assets/1.png">
              </div>
              <div class="message">姓名：{{personInfo.userName}}</div>
              <div class="message">权限：{{personInfo.roleName}}</div>
              <div class="message">邮箱：{{personInfo.email}}</div>
              <div class="message">电话：{{personInfo.phone}}</div>
              <div class="message">地址：{{personInfo.address}}</div>
            </div>
          </el-col>
          <el-col :span="17" style="padding:30px 45px 0;background: #F7F7F7;">
            <el-form ref="personInfoRef" :model="personInfo" label-width="100px">
              <el-row :gutter="40">
                <el-col :span="12">
                  <el-form-item label="用户姓名：">
                    <el-input v-model="personInfo.userName" :readonly="readonly"></el-input>
                  </el-form-item>
                  <el-form-item label="用户邮箱：">
                    <el-input v-model="personInfo.email" :readonly="readonly"></el-input>
                  </el-form-item>
                  <el-form-item label="联系方式：">
                    <el-input v-model="personInfo.phone" :readonly="readonly"></el-input>
                  </el-form-item>
                  <el-form-item label="用户性别：">
                    <el-select v-model="personInfo.sex" :disabled="readonly" style="width:100%;" placeholder="请选择性别">
                      <el-option label="男" :value="1"></el-option>
                      <el-option label="女" :value="0"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="用户年龄：">
                    <el-input v-model="personInfo.age" :readonly="readonly"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="登录账号：">
                    <el-input v-model="personInfo.loginName" :readonly="readonly"></el-input>
                  </el-form-item>
                  <el-form-item label="出生日期：">
                    <el-date-picker
                      v-model="personInfo.birthTime"
                      value-format="yyyy-MM-dd"
                      type="date"
                      placeholder="选择日期"
                      style="width:100%;">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="用户地址：">
                    <el-input v-model="personInfo.address" :readonly="readonly"></el-input>
                  </el-form-item>
                  <el-form-item label="简介：">
                    <el-input type="textarea" v-model="personInfo.back" :readonly="readonly"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row style="text-align:right;">
                <el-form-item style="padding:5px 0 30px;box-sizing:border-box;margin-bottom:0;">
                  <el-button type="primary"  @click="updateUserInfo" v-if="isShow">保存修改</el-button>
                  <el-button type="primary" @click="updateInfo">{{msg}}</el-button>
                </el-form-item>
              </el-row>
            </el-form>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  name: 'person',
  data () {
    return {
      msg: '修改个人信息',
      isShow: false,
      readonly: true,
      personInfo: {},
      loginName: window.sessionStorage.getItem('loginName')
    }
  },
  mounted () {
    this.getUserInfo()
  },
  methods: {
    updateInfo () {
      this.isShow = !this.isShow
      this.readonly = !this.readonly
      if (this.isShow) {
        this.msg = '取消修改个人信息'
      } else {
        this.msg = '修改个人信息'
      }
    },
    updateUserInfo () { // 用户修改
      this.$axios.post('http://localhost:8083/User/updateUserInfo', this.personInfo
      ).then(res => {
        if (res.data.flag) {
          this.myMessage('success', '恭喜您，添加成功！') // 添加成功提示
          this.isShow = !this.isShow
          this.readonly = !this.readonly
          if (this.isShow) {
            this.msg = '取消修改个人信息'
          } else {
            this.msg = '修改个人信息'
          }
          this.getUserInfo() // 添加成功 刷新页面
        } else { // 添加错误提示
          this.myMessage('warning', res.data.obj)
        }
      }).catch(err => {
        console.log(err)
        this.myMessage('warning', '对不起，保存失败，请您稍后再试！') // 添加失败提示
      })
    },
    // 获取用户信息
    getUserInfo () {
      this.$axios.get('http://localhost:8083/User/getUserInfo', {
        params: {
          loginName: this.loginName
        }
      }).then((res) => {
        if (res.data.flag) {
          console.log(this.personInfo + '111')
          this.personInfo = res.data.obj
        }
      }).catch((err) => {
        console.log(err)
        this.myMessage('error', '系统错误')
      })
    },
    myMessage (type, message) {
      this.$message({
        message: message,
        type: type
      })
    }
  }
}
</script>

<style lang="less" scoped>
  #title{
    width:100%;
    height:80px;
    border-bottom: 1px solid #eaeaea;
    line-height:80px;
    text-align: left;
  }
  .el-card__body{
    padding:0;
  }
  .block{
    display: inline-block;
    vertical-align: middle;
    width: 8px;
    height:60px;
    background: #1b91ff;
  }
  .title-text{
    vertical-align: middle;
    display: inline-block;
    font-size:18px;
    font-weight:700;
    margin-left: 40px;
  }
  #personInfo{
    width:100%;
    height:720px;
    padding: 40px 50px;
    box-sizing: border-box;
  }
  .el-textarea__inner{
    height:190px;
  }
  .el-form-item{
    margin-bottom:35px;
  }
  #personCard{
    width:100%px;
    height:630px;
    padding-top: 40px;
    box-sizing: border-box;
  }
  #head-portrait{
    width:150px;
    height:150px;
    border-radius: 50%;
    margin:0 auto;
    overflow: hidden;
    margin-bottom: 25px;
  }
  .message{
    line-height: 45px;
    color:#FFFFFF;
    text-align: center;
  }
</style>
